<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>注册</title>
    <script src="${pageContext.request.contextPath}/jq/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/jq/jquery.growl.js"></script>
    <link href="${pageContext.request.contextPath}/jq/jquery.growl.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bcss/bootstrap.css">

    <style>
        body {
            background-image: url("<%=request.getContextPath()%>/img/register.jpg");
            background-position: center 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            -moz-background-size: cover;
            -ms-background-size: cover;
            color: slateblue;
            font-weight: bolder;
        }

        .form-control{
            background-color: transparent;
            border: 2px solid seagreen;
        }
        .dropdown-item{
            border: 2px solid seagreen;
        }
        #growls.default{
            top: 50px!important;
            left: 100px!important;
        }

        img{
            width: 160px!important;
            height: 170px!important;
        }
    </style>
</head>
<body>
     <div id="register" class="container">
     <form action="${pageContext.request.contextPath}/user/register" method="post" enctype="multipart/form-data">
         <div class="form-group text-center">
             <h4>用户注册</h4>
         </div>
         <div class="form-group">
         <label>昵称:</label><br>
         <input type="text" name="name" class="form-control" required>
         </div>
         <div class="form-group">
         <label id="name_text">账号:</label><br>
         <input type="text" name="username" id="username" class="form-control" required>
         </div>
         <div class="form-group">
         <label>密码:</label><br>
         <input type="password" name="password" id="password" class="form-control" required>
         </div>
         <div class="form-group">
         <label id="text">再次输出密码:</label><br>
         <input type="password" name="repassword" id="repassword" class="form-control" required>
         </div>
         <div class="form-group">
         <label id="phone_text">电话:</label><br>
         <input type="text" name="phone" id="phone" class="form-control" required>
         </div>
         <div class="form-group">
         <label id="emial_text">邮箱:</label><br>
         <input type="email" name="email" id="email" class="form-control" required>
         </div>
         <div class="form-group">
         <label>地址:</label><br>
         <input type="text" name="address" class="form-control" required>
         </div>
         <div class="form-group">
         <label>性别:</label><br>
             <label>
         <input type="radio" name="sex" value="男" class="check-box" checked>男
             </label>
             <label>
         <input type="radio" name="sex" value="女" class="check-box">女
         </label>
         </div>
         <div class="form-group">
         <label>头像(可选):</label><br>
         <input type="file" name="file" id="file">
             <img src="${pageContext.request.contextPath}/img/default.png" class="img-thumbnail" id="header">
         </div>
         <!--
         <div class="form-group">
         <label>角色:</label><br>
         <select name="roleId" class="dropdown-item">
             <c:forEach items="${roles}" var="role">
                 <option value="${role.roleId}">${role.roleName}</option>
             </c:forEach>
         </select>
         </div>
         -->
         <input type="submit" class="btn btn-primary" value="立即注册" id="sub">
     </form>
     </div>
     <script src="${pageContext.request.contextPath}/js/register.js"></script>
     <script>
         var f1=true;
         var f2=true;
         var f3=true;
         var f4=true;

         $("#email").change(function () {
             $.ajax({
                 url:"${pageContext.request.contextPath}/findByEmail",
                 method:"POST",
                 data:{
                     email:$("#email").val()
                 },
                 dataType:"JSON",
                 success:function (data) {
                     if(data.isExisted==true){
                         $("#email").css("border","2px solid red")
                         $("#email_text").css("color","red")
                         f4=false
                         $("#sub").attr("disabled", "true")
                         return $.growl.error({
                             title: "此邮箱已被使用",
                             message: "请使用未注册的邮箱进行注册!"
                         });
                     }else {
                         $("#phone").css("border","2px solid seagreen")
                         $("#phone_text").css("color","slateblue")
                         f4=true
                         if(f1&&f2&&f3&&f4) {
                             $("#sub").removeAttr("disabled")
                         }
                         return $.growl.notice({
                             title: "此邮箱可以使用",
                             message: "该邮箱可以使用"
                         });
                     }
                 }
             })
         })


         $("#phone").change(function () {
             $.ajax({
                 url:"${pageContext.request.contextPath}/findByPhone",
                 method:"POST",
                 data:{
                     phone:$("#phone").val()
                 },
                 dataType:"JSON",
                 success:function (data) {
                    if(data.isExisted==true){
                        $("#phone").css("border","2px solid red")
                        $("#phone_text").css("color","red")
                        f3=false
                        $("#sub").attr("disabled", "true")
                        return $.growl.error({
                            title: "此电话号码已被使用",
                            message: "请使用未注册的电话号码进行注册!"
                        });
                    }else {
                        $("#phone").css("border","2px solid seagreen")
                        $("#phone_text").css("color","slateblue")
                        f3=true
                        if(f1&&f2&&f3&&f4) {
                            $("#sub").removeAttr("disabled")
                        }
                        return $.growl.notice({
                            title: "此电话可以使用",
                            message: "该电话可以使用"
                        });
                    }
                 }
             })
         })

         $("#username").change(function () {
             $.ajax({
                 url:"${pageContext.request.contextPath}/findByUsername",
                 method:"POST",
                 data:{
                     username:$("#username").val()
                 },
                 dataType:"JSON",
                 success:function (data) {
                     if(data.isExisted==true){
                         $("#username").css("border","2px solid red")
                         $("#name_text").css("color","red")
                         $("#sub").attr("disabled","true")
                         f2=false
                         return $.growl.error({
                             title: "账号已被注册",
                             message: "您输入的账号已经存在!"
                         });
                     }else {
                         $("#username").css("border","2px solid seagreen")
                         $("#name_text").css("color","slateblue")
                         f2=true
                         if(f1&&f2&&f3&&f4) {
                             $("#sub").removeAttr("disabled")
                         }
                         return $.growl.notice({
                             title: "账号可以使用",
                             message: "账号还没有被抢注哦！可以使用"
                         });
                     }
                 }
             })
         })
     </script>
</body>
</html>
